<template>
  <div id="band_card">
    <div class="band_card_list"  v-if="bankList.length !== 0">
      <MyCard v-for="(bank, index) in bankList"
        :key="index"
        :cardNumber="bank.cardNumber.toString()"
        :depositBank="bank.depositBank"
        :imgUrl="require(`./assets/${bank.depositBank}.png`)"
      />
    </div>
    <div class="band_card_button" @click="showAddBank()">+添加银行卡</div>
    <addBankCard :updateBank.sync="updateBank" />
  </div>
</template>
<script>
import '../../css/layout.css'
import User from '_common/services/user'
import wxLogin from '_common/wxLogin.js'
export default {
  	name: 'band_card',
  	data() {
  		return {
        updateBank: false,
        bankList: [],
  		}
  	},
  	computed: {
  	},
  	methods: {
      goTo(name) {
        this.$openRouter({
          name,
        })
      },
      showAddBank () {
        this.updateBank = true;
        console.log('this.updateBank:', true);
      },
      getData() {
        User.getBankList().then((res)=> {
        if (res && res.code === 0) {
          this.bankList = res.data.data;
        }
      })
      }
    },
    async beforeMount() {
      await wxLogin(this.getData)
    },
    components: {
    }
}  
</script>

<style lang="less">
html {
  height: 100%;
  background-color: #f8f8f8;
  body {
    height: 100%;
    background-color: #f8f8f8;
    #band_card {
    height: 100%;
    background-color: #f8f8f8;
    .band_card_list {
      width: 100%;
      box-sizing: border-box;
      margin: 0px 0px 56px;
      padding: 0 32px;
      background-color: #f8f8f8;
    }
    .band_card_button {
      background-color: white;
      height: 100px;
      font-size: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 78px;
    }
    }
  }
}
</style>